<template>
    <div id="setUp">
        <div>
            <van-nav-bar
            title="设置"
            left-arrow
            @click-left="onClickLeft"
            ></van-nav-bar>
        </div>
        <div id="setUp2">
            <div style="width:20%;line-height: 90px;text-align: center;">
                <img :src="totalData.imgData" alt="" style="width:70px;height:70px;border-radius: 45px;box-shadow:0 0 10px #333;margin-top: 10px;">
            </div>
            <div style="width:60%;">
                <div style="font-weight: bolder;font-size: 20px;height: 50%;line-height: 45px;">
                    <span>{{totalData.nameData}}</span>
                </div>
                <div style="height:50%;line-height: 45px;">
                    <span>188****7024</span>
                </div>
            </div>
            <div style="width:20%;text-align: center;">
                <van-button round type="default" plain hairline style="height:40px;width:80px;border: 1px solid #c1ab96;margin-top: 25px;" color=#c1ab96; @click="dj">编辑</van-button>
            </div>
        </div>
        <div style="width:100%;height:15px;background-color: rgba(235, 233, 229);"></div>
        <div id="setUp3">
            <van-cell title="手机号修改" is-link @click="modifyPN"/>
        </div>
        <div style="width:100%;height:15px;background-color: rgba(235, 233, 229);"></div>
        <div id="setUp3">
        <van-cell title="音效与通知" is-link to="/phoneVoice"/>
        </div>
        <div id="setUp3">
            <van-cell title="通用" is-link to="/general"/>
        </div>
        <div id="setUp3">
            <van-cell title="隐私条款" is-link to="/privacyPolicy"/>
        </div>
        <div style="width:100%;height:15px;background-color: rgba(235, 233, 229);"></div>
        <div id="setUp3">
            <van-cell title="问题反馈" is-link to="/ServiceChat"/>
        </div>
        <div id="setUp3">
            <van-cell title="关于" is-link />
        </div>
        <div id="setUp3">
            <van-cell title="检查更新" value="V6.0" is-link/>
        </div>
        <div id="setUp4">
            <van-button round color="#d1082a" size="large" to="/notLogged">退出登录</van-button>
        </div>
    </div>
    
</template>
<script setup lang="ts">
import {ref} from 'vue'
import {useRouter} from 'vue-router'
const router = useRouter()
    let totalData = ref({
        imgData:ref('https://img2.baidu.com/it/u=1309682942,3174268086&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1665853200&t=268f592c8e199ac0f79a3ce9a505e64d'),
        nameData:ref('OMINI.BASS'),
        phoneNumber:ref('18801552256'),
    })
    let onClickLeft = ()=>{
        history.back();
    }
    let dj = ()=>{
       router.push({path:'/personalInformationEditing',query:{data:JSON.stringify(totalData.value)}})
    }
    let modifyPN = ()=>{
        router.push({path:'/mobilePhoneNumberModification',query:{data:JSON.stringify(totalData.value)}})
    }
</script>
<style scoped>
    #setUp {
        width: 100%;
        height: 850px;
        margin: 0;
        background-color: rgba(235, 233, 229);
    }
    #setUp2 {
        height: 90px;
        width: 100%;
        display: flex;
        background-color: rgba(255, 255, 255);
    }
    #setUp3 {
        height: 60px;
        font-size: 16px;
        padding: 10px 10px 10px 0;
        box-sizing: border-box;
        background-color: rgba(255, 255, 255);
    }
    #setUp4 {
        box-sizing: border-box;
        margin-top: 160px;
        width: 100%;
        height: 60px;
        padding: 10px;
    }
</style>